import React from 'react';
import { createModalContainer } from '@/components/changeModal';
import {Button, message, Form, Select} from 'antd';
import { connect } from 'dva';
import styles from './index.less';

const FormItem = Form.Item;
const Option = Select.Option;

@Form.create()
class CancelOrderComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isFetching: false
        }
    }

    componentWillMount() {
        window.Isoption = false;
      }
      componentDidMount() {
        window.Isoption = true;
      }

    // 取消
    handleCancel =() => {
        this.props.cancel();
    }

    handleSubmit = e => {
        e.preventDefault();
        const { dispatch } = this.props;
        this.setState({
            isFetching: true
        })
        this.props.form.validateFields((err, values) => {
            if(!err) {
                dispatch({
                    type: 'orderList/CancelOrder',
                    payload: {
                        OrderNo: this.props.param.OrderNo,
                        CancelReason: values.reson
                    },
                    callBack: {
                        success: res => {
                            message.success('取消成功');
                            this.setState({
                                isFetching: false
                            }, () => {
                                this.props.ok();
                            })
                        },
                        error: res => {
                            this.setState({
                                isFetching: false
                            });
                            message.error(res.Msg)
                        }
                    }
                })
            } else {
                this.setState({
                    isFetching: false
                })
            }
        })
    }

    render() {
        const {getFieldDecorator} = this.props.form;
        const {isFetching} = this.state;
        const reson = [
            "无法联系上买家",
            "买家误拍或重拍了",
            "买家无诚意完成交易",
            "已通过银行线下汇款",
            "已通过同城见面交易",
            "已通过货到付款交易",
            "已通过网上银行直接汇款",
            "已经缺货无法交易"
        ];
        const formItemLayout = {
            labelCol: {
                span: 2,
              },
              wrapperCol: {
                span: 20,
              },
          }
        return (
            <Form onSubmit={this.handleSubmit} className={styles.cancelModal}>
                <FormItem
                    {...formItemLayout}
                    label=" "
                >
                    {getFieldDecorator('reson',{
                        rules: [{required: true, message: '此项为必选项'}]
                    })(
                        <Select placeholder="请选择一个取消理由" className="xkd-width-per-100">
                            {reson.map((item, index) => {
                                return <Option key={index} value={item}>{item}</Option>
                            })}
                        </Select>
                    )}
                </FormItem>
                <FormItem className="xkd-model-footBtn">
                    <Button onClick={this.handleCancel} className="xkd-mr8">
                        取消
                    </Button>
                    <Button
                        type="primary"
                        htmlType="submit"
                        loading={isFetching}
                    >
                        确定
                    </Button>
                </FormItem>
            </Form>
        )
    }
}

const CancelOrder = createModalContainer(
    connect(({orderList, global, loading}) =>({
        orderList
    }))(CancelOrderComponent),
    true,
    true
);

export default CancelOrder;
